<template>
	<view class="settle-box">
		<!-- 单选框 -->
		<view class="radio-box" @click="changeCountState">
			<label class="radio">
				<radio color="#c00000" :checked="isFullChenck" /><text> 全选 </text>
			</label>
		</view>

		<view class="monye">
			合计: <text class="nums"> ￥{{checkedTotalNums}} </text>
		</view>

		<!-- 结算按钮 -->
		<view class="button-box" @click="btnBox">
			结算({{checkedConut}})
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		name: "my-settle",
		computed: {
			// 映射商品数量、价格
			...mapGetters('m_cart', ['checkedConut', 'total', 'checkedTotalNums']),
			...mapState('m_cart',['cart']),
			...mapGetters('m_user', ['addstr']),
			...mapState('m_user', ['token','address']),
			// 是否全选
			isFullChenck() {
				return this.checkedConut === this.total
			}
		},
		data() {
			return {
				countdown: 3,
				timer:null
			};
		},
		methods: {
			...mapMutations('m_cart', ['updataAllCountState']),
			...mapMutations('m_user',['updataRedirectInfo']),
			// 结算
			btnBox() {
				if (!this.checkedConut) return uni.$showMsg('请选择要结算的商品!')

				// if(!this.addstr) return uni.$showMsg('请输入地址!')

				if (!this.token) return this.deleyNavigate()
				this.playOrder()
			},
			// 支付
			async playOrder(){
				// 创建订单
				// 订单的参数
				const orderInfo = {
					order_price: this.checkedTotalNums,
					// order_price: 0.01,
					consignee_addr: this.address,
					goods: this.cart.filter(x => x.goods_state).map( x => ({
						goods_id:x.goods_id,
						goods_number:x.goods_count,
						goods_price:x.goods_price
					}) ),
				}
				// 创建订单
				let {data: res} = await uni.$http.post('/api/public/v1/my/orders/create',orderInfo)
				if(res.meta.status !== 200 ) return uni.$showMsg('创建订单失败！')
				// 获取订单号
				const orderNumber = res.message.order_number
				
				// 创建预支付
				let {data:res2} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{order_number:orderNumber})
				if(res2.meta.status !== 200 ) return uni.$showMsg('创建预支付失败！')
				const playInof = res2.message.pay

				// 发起支付功能
				let [err,succ] = await uni.requestPayment(playInof)
				if(err) return uni.$showMsg('支付失败！')
				// 进一步完善支付，查询支付状态
				let {data:res3} = await uni.$http.post('/api/public/v1/my/orders/chkOrder',{order_number:orderNumber})
				if(res3.meta.status !== 200 ) return uni.$showMsg('订单未支付')
				uni.showToast({
					title:'支付成功',
					icon:'success'
				})
				
			},
			changeCountState() {
				
				this.updataAllCountState(!this.isFullChenck)
			},
			// 未登录跳转
			toTips(n) {
				uni.showToast({
					icon: 'none',
					title: '还未登录' + n + '秒后跳转登录页面',
					duration: 1500,
					mask: 'true'
				})
			},
			// 跳转时间
			deleyNavigate() {
				// 重置秒数
				this.countdown = 3
				this.toTips(this.countdown)
				this.timer = setInterval(() => {
					this.countdown--
					if(this.countdown <=0){
						// 清除定时器
						clearInterval(this.timer)
						// 跳转登录页
						uni.switchTab({
							url:'/pages/my/my',
							success() {
								this.updataRedirectInfo({
									openType:'switchTab',
									from:'pages/cart/cart'
								})
							}
						})
						
						return 
					}
					this.toTips(this.countdown)
				}, 1000)
			}

		}

	}
</script>

<style lang="scss">
	.settle-box {
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.radio-box {
			margin-left: 10rpx;
		}

		.nums {
			color: #c00000;
			font-size: 40rpx;
		}

		.button-box {
			background-color: #c00000;
			width: 200rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: white;
			font-size: 40rpx;
			text-align: center;
		}
	}
</style>
